<html>
<head>
<script src="js/jquery-1.9.1.min.js"></script>
<link rel="stylesheet" type="text/css" href="css/default.css" media="screen" />
<script>
var debug = 0; // debug = 1 means display sql queries and other debug info
var params = [ "lat","lng","name","rating","votes","address","city","state","zip","distance","lng_orig","lat_orig","amenities", // toilet attrs
               "toilet", "type", // amenity attrs
               "user", "comment", "rating", "timeStamp", // comment attrs
               "id","passwd" // user attrs
             ];

	function toggleDebug() {
		if (debug == 1) {
			debug = 0;
			$("#debug").text("Turn debug on");
		} else {
			debug = 1;
			$("#debug").text("Turn debug off");
		}
	}

	// test connectivity
	function test() {
		$.post("test.php", {}, function(status, data) {
			$("#result").html(data);
		})
	}

	// prints response in feedback div
	function printResult(fieldset, data) {
		$("#" + fieldset + " #result").html(data);
		// populate input fields with return data. make sure debug is off or this won't work!
		var json = $.parseJSON(data);
		if (json[fieldset].length > 0) {
			for (var i = 0; i < params.length; i++) {
				if (json[fieldset][0][params[i]] != null)
					$("#" + fieldset + " #" + params[i]).val(json[fieldset][0][params[i]]);
			}
		}
	}

	// post something to some url
	function post(queryType, table) {
		// build url e.g., packages/create.php
		var url = table + "/" + queryType + ".php";
		$("#" + table + " #result").text(queryType + " " + table + "... please wait");

		// build json object
		var json = {};
		json["debug"] = debug; // debug mode gets sql query echo

		// add params to json object if set. only look at vals in the appropriate fieldset e.g., #packages #name
		for ( var i = 0; i < params.length; i++) {
			if ($("#" + table + " #" + params[i]).val()) {
				json[params[i]] = $("#" + table + " #" + params[i]).val();
			}
		}
		// execute post
		$.post(url, json, function(data, status) {
			printResult(table, data);
		})
	}
</script>
</head>
<body>
	<div class="section">
		<button id="debug" onclick="toggleDebug()">Turn debug on</button><button id="test" onclick="test()">Test connectivity</button>
		<span id="result"></span>
	</div>
	<fieldset id="toilets">
		<legend>Toilets</legend>
		<div class="section">
			<div>
				<input id="id"><br>
				<div class="label">ID</div>
			</div>
		</div>
		<div class="section">
			<div>
				<input id="lat" value="34.067005"><br>
				<div class="label">Lat</div>
			</div>
			<div>
				<input id="lng" value="-106.905062"><br>
				<div class="label">Lng</div>
			</div>
			<div>
				<input id="name" value="Cramer Hall"><br>
				<div class="label">Name</div>
			</div>
		</div>
		<div class="section">
			<div>
				<input id="rating" value="3.5"><br>
				<div class="label">Rating</div>
			</div>
			<div>
				<input id="votes" value=""><br>
				<div class="label">Votes</div>
			</div>
		</div>
		<div class="section">
			<div>
				<input id="address" value="801 Leroy Pl"><br>
				<div class="label">Address</div>
			</div>
			<div>
				<input id="city" value="Socorro"><br>
				<div class="label">City</div>
			</div>
			<div>
				<input id="state" value="NM"><br>
				<div class="label">State</div>
			</div>
			<div>
				<input id="zip" value="87801"><br>
				<div class="label">ZIP</div>
			</div>
		</div>
		<div class="section">
			<div>
				<input id="lat_orig" value="34.067005"><br>
				<div class="label">Origin lat</div>
			</div>
			<div>
				<input id="lng_orig" value="-106.905062"><br>
				<div class="label">Origin lng</div>
			</div>
			<div>
				<input id="distance" value="500"><br>
				<div class="label">Max distance (in meters)</div>
			</div>
			<div>
				<input id="amenities" value="Diaper changing station,Feminine product dispenser"><br>
				<div class="label">Amenities</div>
			</div>
		</div>
		<button onclick="post('create','toilets')">Create</button>
		<button onclick="post('request','toilets')">Request</button>
		<button onclick="post('update','toilets')">Update</button>
		<button onclick="post('delete','toilets')">Delete</button>

		<div id="result" class="feedback"></div>
	</fieldset>
	<fieldset id="amenities">
		<legend>Amenities</legend>
		<div class="section">
			<div>
				<input id="toilet" value="1"><br>
				<div class="label">Toilet ID</div>
			</div>
			<div>
				<input id="type" value="Diaper changing station"><br>
				<div class="label">Amenity</div>
			</div>
		</div>
		<button onclick="post('create','amenities')">Create</button>
		<button onclick="post('request','amenities')">Request</button>
		<button onclick="post('update','amenities')">Update</button>
		<button onclick="post('delete','amenities')">Delete</button>

		<div id="result" class="feedback"></div>
	</fieldset>
	<fieldset id="users">
		<legend>Users</legend>
		<div class="section">
			<div>
				<input id="id" value="james"><br>
				<div class="label">Username</div>
			</div>
			<div>
				<input id="passwd" value="poop" type="password"><br>
				<div class="label">Password</div>
			</div>
		</div>
		<button onclick="post('create','users')">Create</button>
		<button onclick="post('request','users')">Request</button>
		<button onclick="post('update','users')">Update</button>
		<button onclick="post('delete','users')">Delete</button>

		<div id="result" class="feedback"></div>
	</fieldset>
	<fieldset id="comments">
		<legend>Comments</legend>
		<div class="section">
			<div>
				<input id="toilet" value="1"><br>
				<div class="label">Toilet ID</div>
			</div>
			<div>
				<input id="user" value="james"><br>
				<div class="label">User ID</div>
			</div>
		</div>
		<div class="section">
			<div>
				<textarea id="comment">There was a weird guy here.</textarea>
				<div class="label">Comment</div>
			</div>
			<div>
				<input id="rating" value=3.5><br>
				<div class="label">Rating</div>
			</div>
			<div>
				<input id="timeStamp"><br>
				<div class="label">Timestamp</div>
			</div>
		</div>
		<button onclick="post('create','comments')">Create</button>
		<button onclick="post('request','comments')">Request</button>
		<button onclick="post('update','comments')">Update</button>
		<button onclick="post('delete','comments')">Delete</button>

		<div id="result" class="feedback"></div>
	</fieldset>
</body>
</html>